<template>
  <el-table-column
    v-if="column.children"
    v-bind="getAttrs(column)"
  >
    <template
      v-for="(child, key) in column.children"
      :key="key"
    >
      <table-column :column="child" />
    </template>
  </el-table-column>
  <el-table-column
    v-else-if="column.render && typeof(column.render) === 'function'"
    v-bind="column"
  >
    <template #default="scope">
      <table-slot
        :render="column.render"
        :row="scope.row"
        :index="scope.$index"
        :column="scope.column"
        :store="scope.store"
        :_self="scope._self"
      />
    </template>
  </el-table-column>
  <el-table-column
    v-else
    v-bind="column"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue';

import TableSlot from './table-slot';

export default defineComponent({
  name: 'TableColumn',
  components: {
    TableSlot,
  },
  props: {
    column: {
      type: Object,
      required: true,
    },
  },
  setup() {
    return {
      /**
         * @description: 格式化参数， 不能将 [object Object] 作为DOM标签的属性
         */
      getAttrs: (params:TypeObject) => {
        const newParams = { ...params };
        delete newParams.children;
        return newParams;
      },
    };
  },
});
</script>
